<template>
    <div class="mod-config">
        <div style="padding: 10px;">
            <el-button type="primary" @click="handleDown">PDF下载-报价单</el-button>
            <el-button type="primary" @click="handleWindowPrint( '#demo', '离职申请表' )">浏览器方式下载</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
            </el-button>
        </div>
        <div style="width: 100%">
            <div id="demo">
                <!--头部信息-->
                <div style="text-align: center">
                    <span style="font-size: 34px;">湖南销售易有限公司</span><br>
                    <span>
                        <span>Tel：0767-81892700</span>
                        <span style="margin-left: 20px">Fax：0767-81892711</span>
                    </span><br>
                    <span>
                        <span>E-mail：yjq10131120@163.com</span>
                        <span style="margin-left: 20px">www：baidu.com</span>
                    </span><br>
                    <span style="font-size: 24px;margin-left: 220px">报价合同</span>
                    <span style="float: right">报价编号：O_20200407_46240</span>
                </div>

                <!--客户信息-->
                <div style="font-weight: bold">
                    <span style="color: gray">客户：</span>
                    <span style="color: black;margin-left: 20px">{{offerfrom.client.clientName}}</span>
                    <span style="color: gray;margin-left: 350px">联系人：</span>
                    <span style="color: black;margin-left: 20px">{{offerfrom.busPrimarycontact.linkmanName}}</span><p></p>
                    <span style="color: gray">电话：</span>
                    <span style="color: black;margin-left: 20px">{{offerfrom.client.clientPhone}}</span>
                    <span style="color: gray;margin-left: 80px">手机：</span>
                    <span style="color: black;margin-left: 20px">{{offerfrom.client.clientMobile}}</span>

                    <span style="color: gray;margin-left: 96px">传真：</span>
                    <span style="color: black;margin-left: 20px"></span>
                    <span style="color: gray;margin-left: 80px">日期：</span>
                    <span style="color: black;margin-left: 20px">{{nowtime}}</span><p></p>

                    <span style="color: gray">地址：</span>
                    <span style="color: black;margin-left: 20px">{{offerfrom.client.clientSite}}</span>
                    <!--{{offerfrom.client.clientName}}-->
                </div>

                <!--产品详情-->
                <div style="margin-top: 10px">
                    <el-table
                        :cell-style="cellstyle"
                        :header-cell-style="rowclass"
                        :data="offerfrom.offerList"
                        style="width: 100%;
                        border: 1px solid #EBEEF5;margin-top: 20px">
                            <el-table-column
                                    label="产品名称"
                                    align="center"
                                    prop="product.productName">
                            </el-table-column>
                            <el-table-column
                                    label="规格"
                                    align="center">
                                <template slot-scope="s">
                                <span v-for="pro in s.row.productdetail.qmodeldetails" :key="pro.prodetailId">
                                    {{pro.modetContent}}
                                </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="productdetail.prodetaiJpri"
                                    label="单价（元）"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="productdetail.prodetailSpri"
                                    label="售价"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="数量"
                                    align="center"
                                    prop="offerdetailNum">
                            </el-table-column>
                            <el-table-column
                                    label="折扣"
                                    align="center">
                                <template slot-scope="s">
                                    <span>{{s.row.offerdetailDeiscount}}%</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="offerdetailTotal"
                                    label="小计"
                                    align="center"
                                    sortable>
                            </el-table-column>
                    </el-table>
                    <span style="margin-top: 10px">
                        合计（大写金额）：{{count}}
                    </span>
                </div>

                <!--报价合同注意事项-->
                <div style="margin-top: 10px;border: 1px solid black;letter-spacing:1px;">
                    <div style="margin-left: 10px">
                    <span>
                        贵我双方本着互惠互利、合作共赢的原则，就本批产品签订合同条款如下:
                    </span>
                    <br>
                    <span>
                        ①.本报价结算币种为人民币:口不含税口含税16%
                    </span>
                    <br>
                    <span>
                        口对公含税账户:公司名称: 东莞市川品五金有限公司.
                    </span>
                    <br>
                    <span>
                        开户行:农业银行东莞市长安支行.账号:44284001040024510
                    </span>
                    <br>
                    <span>
                        口对私不含税账户:开户名:马克莉账号: 6228450600082576110 农业银行东莞市长安支行
                    </span>
                    <br>
                    <span>
                        口对私不含税账户:开户名:彭天军账号: 6228460600006579115 农业银行东莞市长安支行
                    </span>
                    <br>
                    <span>
                        ②.交货时间自需方下单日期算起个工作日，负责交货到需方(有图纸确认以双方确认之日起计算。
                    </span>
                    <br>
                    <span>
                        节假日顺延，不含运输时间)
                    </span>
                    <br>
                    <span>
                        ③付款方式:口预付100%款到发 货口快递代收口货到验收合格发票提供款项付清口月结30天(以出货
                    </span>
                    <br>
                    <span>
                        日计算)口其它逾期则需方 按货款总额的1%/天作为韦约金支付给供方。
                    </span>
                    <br>
                    <span>
                        ④运输费用:口供方包邮口需方支付客户需要供方免费维修模具运费由需方支付，合同金额低于500元
                    </span>
                    <br>
                    <span>
                        需方支付运费.
                    </span>
                    <br>
                    <span>
                        ⑤数冲模具质量保证:产品(不含单边尺寸小于3毫米)壹年内出现断裂、崩角等由供方免费更换，但不承担
                    </span>
                    <br>
                    <span>
                        ⑤数冲模具质量保证:产品(不含单边尺寸小于3毫米)壹年内出现断裂、崩角等由供方免费更换，但不承担
                    </span>
                    <br>
                    <span>
                        其他责任. (正常磨损、 可换分体式及分体刀片及需方操作不正确，不适此条件)其它模具:
                    </span>
                    <br>
                    <span>
                        ⑥由于需方原因不能将送货单及对账单签字盖章回传的，双方以此合同作为账单及收据依据
                    </span>
                    <br>
                    <span>
                        ⑦包装标准:厂家原包装(内珍珠棉,外彩盒包装),包装物不回收.
                    </span>
                    <br>
                    <span>
                        ⑧纠纷解决:双方友好协商解决,协商不成由供方所在地人民法院提起诉讼或仲裁.
                    </span>
                    <br>
                    <span>
                        ⑨需方对上述产品规格和.上述条款无异议，签字盖章回传供方时合同生效。
                    </span>
                    <br>
                    <span>
                        ◎本合同-式两份，供需双方签名即生效,各执-份，由双方代表人签字、盖章后生效。传真件等同原件.
                    </span>
                    </div>
                </div>

                <!--盖章签字-->
                <div style="margin-top: 10px;height: 300px">
                    <div style="float: left">
                        <p>需方单位：{{offerfrom.client.clientName}}</p>
                        <p>委托代表人（签章）：</p>
                        <p>签订日期：{{nowtime}}</p>
                    </div>
                    <div style="float: left;margin-left: 20px">
                        <p style="margin-left: 220px">供方单位：湖南兴盛科技有限公司</p>
                        <p style="margin-left: 220px">委托代表人（签章）：</p>
                        <p style="margin-left: 220px">签订日期：{{nowtime}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import htmlToPdf from '../utils/htmlToPdf'
    import Crypto from "../router/secret";
    const libraryOption = [{id: 0, name: '家庭原因'}, {id: 1, name: '个人发展'}, {id: 2, name: '薪资福利'},
        {id: 3, name: '工作环境'}, {id: 4, name: '工作时间'}, {id: 5, name: '身体健康'}]
    const calendarTypeKeyValue = libraryOption.reduce((acc, cur) => {
        acc[cur.id] = cur.name
        return acc
    }, {})
    export default {
        name: 'Test',
        data () {
            // 和导出pdf没关系
            return {

                nowtime:'',//日期
                count:0,//产品合计

                offerfrom:{
                    offerId:0,
                    business:{
                        busId:0,
                        busNo:'',
                    },
                    offerTheme:'',
                    offerNumbers:'',
                    offerMoney:'',
                    offerNote:'',
                    offerPeople:'',
                    offerProfit:'',
                    offerTime:'',
                    client:{
                        clientId:0,
                        clientName:'',
                        clientMobile:'',
                        clientPhone:'',
                        clientSite:''
                    },
                    busPrimarycontact:{
                        linkmanId:0,
                        linkmanName:'',
                    },
                    offerList:[]

                },

                leaveData: {
                    dimId: ''
                },
                approvalLogs: []
            }
        },
        filters: {
            typeFilter (type) {
                return calendarTypeKeyValue[type]
            }
        },
        created () {
            //this.getList()
            this.selectOfferBybusId();
            this.total();
            this.getNowTime();
        },
        methods: {
            /*默认今天*/
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth(); //得到月份
                var date = now.getDate(); //得到日期
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date}`;
                this.nowtime=defaultDate;
            },
            total(){
                var a = 0;
                this.offerfrom.offerList.forEach((v)=>{
                    a=a+parseFloat(v.offerdetailTotal);
                })
                this.print(a);
                this.count=this.ToString(a);
            },
            ToString(n) {

                if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
                    return "数据非法";  //判断数据是否大于0
                }

                var unit = "千百拾亿千百拾万千百拾元角分", str = "";
                n += "00";

                var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数

                if (indexpoint >= 0){

                    n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
                }

                unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
                for (var i=0; i < n.length; i++){
                    str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
                }

                return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
            },
            rowclass(){
                return "text-align:center"
            },
            cellstyle(){
                return "text-align:center"
            },
            selectOfferBybusId(){
                var busId = Crypto.get(unescape(this.$route.query.busId));
                var offerId = Crypto.get(unescape(this.$route.query.offerId));
                this.$axios.post("http://localhost:8088/offer/selectOfferBybusId",this.qs.stringify({
                    busId:busId,
                    offerId:offerId
                })).then((v)=>{
                    this.offerfrom=v.data[0];
                    this.total();
                }).catch(()=>{

                })
            },

            handleWindowPrint (ele, fileName) {
                // 留存原来的 html
                // let bdHtml = window.document.body.innerHTML;
                // let bdHtml = document.querySelector('#app').innerHTML;

                // 要打印的 内容 html
                // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
                // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
                // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
                // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
                console.log(666)
                // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
                document.head.innerHTML = '<meta charset="utf-8">\n' +
                    ' <title> ' + fileName + '</title>\n' +
                    ' <meta name="format-detection" content="telephone=no">\n' +
                    ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
                    ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
                    ' <link rel="stylesheet" href="./static/css/contract.css"/>'  // 生成pdf的外部css样式
                // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
                // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
                // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
                document.body.innerHTML = document.querySelector(ele).outerHTML

                // window.print();

                // 转异步 等待dom元素渲染（样式）完毕在打印
                setTimeout(() => {
                    // 打印
                    window.print()
                    // 刷新页面
                    window.location.reload()
                }, 20)

                // 重新设会当前页面
                // window.document.body.innerHTML = bdHtml;
                // document.querySelector('#app').innerHTML =  bdHtml;
                // 刷新页面
                // window.location.reload();
            },
            goBack () {
                this.$router.go(-1)
            },
            handleDown () {
                htmlToPdf.downloadPDF(document.querySelector('#demo'), '报价表')
            }
        }
    }
</script>

<style scoped>
    #demo {
        background-color: #fff;
        width: 1000px;
        /* height: 400px; */
        margin: auto;
        padding: 40px;
        box-sizing: border-box;
    }

    .table_style td,th {
        padding: 10px;
        font-size: 15px;
    }

    .table_style {
        border-collapse: collapse;
        width: 100%;
        text-align: center
    }

</style>
